<template>
  <div class="img-bar"
    :class="{'one-img': pictureProps.picStyle === '10'}"
    :style="{'padding': pictureProps.verticalMargin + 'px ' + pictureProps.horizontalMargin + 'px'}">
    <div class="image pos-rel" :class="{'double-img': pictureProps.picStyle !== '10'}"
    :style="{'width':pictureProps.picStyle === '10' ? '100%' : '50%'}"
    v-for="(img, imgIndex) in pictureInfo"
      :key="imgIndex" @click="linkTo(img)">
      <button v-if="img.linkType === '1012' && enterpriseCustomerServiceAuthority === 1" :send-message-title="memberInfo.nickname + '的V客主页'" plain
      send-message-img="https://veekrayimg.joinsun.vip/images/share-s-picture.png" show-message-card="true"
        send-message-path="/pages/home/main" open-type="contact" class="contactBtn hidden-submit button-icon"
        :session-from="'7moor|'+ customerInfo.nickname + '|' + customerInfo.avatar +'|'+ customField"></button>
      <template v-if="pictureProps.picStyle === '10'">
        <template v-if="!iOS">
          <img :id="imgIndex === 0 ? 'img-bar-' + index : ''"
            :style="{width: '100%', height: img.height ? img.height + 'px' : pictureProps.pictureHeight + 'px', borderRadius: pictureProps.radius + 'px'}"
            :src="img.imgUrl + '?imageView2/2/w/700'" v-if="img.imgUrl" alt="">
        </template>
        <template v-else>
          <image :id="imgIndex === 0 ? 'img-bar-' + index : ''"
            :style="{width: '100%', height: 'auto', borderRadius: pictureProps.radius + 'px'}"
            mode="widthFix"
            :src="img.imgUrl + '?imageView2/2/w/750'" v-if="img.imgUrl" alt=""></image>
        </template>
      </template>
      <template v-if="pictureProps.picStyle !== '10'">
        <image :id="imgIndex === 0 ? 'img-bar-' + index : ''"
          :style="{height: pictureProps.height + 'px', borderRadius: pictureProps.radius + 'px'}"
          :src="img.imgUrl + '?imageView2/2/w/750'" v-if="img.imgUrl" alt=""></image>
      </template>      
    </div>
  </div>
</template>
<script>
export default {
  props: {
    pictureInfo: {
      type: Array,
      default: function() {
        return []
      }
    },
    pictureProps: {
      type: Object,
      default: function() {
        return {}
      }
    },
    customerInfo: {
      type: Object,
      default: function() {
        return {}
      }
    },
    memberInfo: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      iOS: false
    }
  },
  onLoad() {
    if (!this.$pt.getStorageSync('iOS')) {
      // android类型
      this.iOS = false
    } else {
      this.iOS = true
    }
  },
  watch: {
    pictureInfo: {
      deep: true,
      immediate: true,
      handler(newVal) {
        this.pictureInfo = newVal
      }
    },
    pictureProps(newVal) {
      this.pictureProps = newVal
    }
  },
  methods: {
    linkTo(item) {
      this.$emit('linkTo', item)
    }
  }
}
</script>
<style lang="less" scoped>
// 图片组样式
.img-bar {
  font-size: 0;
  .image {
    display: inline-block;
    image {
      width: 100%;
      height: 100%;
    }
  }
}
.one-img{
  .image{
    &:nth-child(2){
      display: none;
    }
  }
}
</style>
